import React from 'react';
import {Form, Input, Button, Modal, Message, DatePicker, Icon, Table ,Select, Row, Col } from 'antd';
import CapitalModal from './capitalModal';


const FormItem = Form.Item;
const Option = Select.Option;

let CollectList = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            pagination: {
                current: 1,
                pageSize: 10
            },
            visible: false,
            detailData: [],
            detailDataPagination:{
                current: 1,
                pageSize: 5
            },
        }
    },

    componentDidMount() {
        this.handleSearch()
    },

    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },

    fetch() {

        let forms = this.props.form.getFieldsValue();
        let page = this.state.pagination.current;
        let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
        let _me = this
        Utils.sendAjax({
            url: '/finance/fund/list',
            data: JSON.stringify(params),
            callback: function (result) {
                if (result.code == '200') {
                    _me.setState({
                        data: result.data,
                        pagination: result.page
                    })
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    getDetail(param){
        let _me = this;
        let params = Object.assign({}, {pageSize: 5, currentPage: '1'}, param);
        Utils.sendAjax({
            url: '/finance/fund/detail',
            data: JSON.stringify(params),
            callback: function(result) {
                if (result.code == '200') {
                    _me.setState({
                        detailData: result.data,
                        detailDataPagination: result.page
                    })
                } else {
                    Message.error(result.message, 10)
                }
            }
        })
    },

    handleSearch() {
        this.setState({
           pagination : {
               current : 1
           }
        });
        this.fetch();
    },
    
    handleReset() {
        this.props.form.resetFields();
    },

    rowKey(data) {
        return data.tenementId;
    },

  /*  //对话框
    showModal() {
        this.setState({
            visible: true,
        });
    },
*/
    showModal(param) {
        this.setState({
            visible: true,
            tenementId: param
        });
        this.getDetail({tenementId: param});
    },

    handleOk() {
        console.log('点击了确定');
        this.setState({
            visible: false,
        });
    },

    handleCancel(e) {
        this.setState({
            visible: false,
        });
    },

    //日期选择框
    onChange(value, dateString) {
        console.log(value, dateString);
    },

    render() {
        console.log(this.state.pagination)
        const { getFieldProps } = this.props.form;

        const columns = [
            {
                title: '房源名称',
                dataIndex: 'tenementName'
            }, {
                title: '盈利情况',
                render: (text, record) => (
                    <span>{record.isProfit == 1 ? '盈' : '亏'}</span>
                )
            }, {
                title: '总计收入',
                dataIndex: 'incomeTotal'
            }, {
                title: '总计支出',
                dataIndex: 'expensesTotal'
            }, {
                title: '操作',
                render: (text, record) => {
                    return (
                        <a href="javascript:;"  onClick={this.showModal.bind(this,record.tenementId)}>查看详情</a>
                    )
                }
            },
        ];
        return (
            <div>
                <div className="search-bar">
                    <Form inline>
                        <FormItem label="关键字">
                            <Input {...getFieldProps('tenementName') } placeholder="房源名称"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
                            <Button type="primary" onClick={this.handleReset} style={{marginRight: 20}}>重置</Button>
                        </FormItem>
                    </Form>
                </div>
                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                       onChange={this.handleTableChange}
                       pagination={this.state.pagination}/>

                <CapitalModal visible={this.state.visible}
                 detailData={this.state.detailData}
                 pagination={this.state.detailDataPagination}
                 tenementId={this.state.tenementId} 
                 callHide={this.handleCancel}/>
            </div>
        );
    }
});

CollectList = Form.create()(CollectList);
export default CollectList